---
const { class: className, title: title } = Astro.props;
import z1 from "@assets/qualityAndReliability/z1.png";
import z2 from "@assets/qualityAndReliability/z2.png";
import z3 from "@assets/qualityAndReliability/z3.png";
import z1Red from "@assets/qualityAndReliability/z1-red.png";
import z2Red from "@assets/qualityAndReliability/z2-red.png";
import z3Red from "@assets/qualityAndReliability/z3-red.png";


const itemList = [
  {
    CH: "质量管理",
    icon: z1,
    hoverIcon: z1Red,
  },
  {
    CH: "环境管理",
    icon: z2,
    hoverIcon: z3Red,
  },
  {
    CH: "可靠性",
    icon: z3,
    hoverIcon: z2Red,
  },
];
---

<div class:list={[className]}>
 <ul class="px-[16px] box-border mb-[16px]">
    {
        itemList.map(item => (
            <li class="text-[14px] flex cursor-pointer mb-[10px]">
              <img src={item.icon?.src} alt='' class="mr-[8px] w-[16px] h-[16px] items-center default" />
              <img src={item.hoverIcon?.src} alt='' class="mr-[8px] w-[16px] h-[16px] items-center hover" />

                <span>{item.CH}</span>
            </li>
            ))
    }
    <li class="text-brown text-[14px] cursor-pointer font-normal hover:underline">查看更多</li>
    </ul>
</div>
<style lang="scss" scoped>
  img.default{
    display: inline-block;
  }
  img.hover{
    display: none;
  }
li:hover{
    color: #712C2F;
    img.default{
      display: none;
    }
    img.hover{
      display: inline-block;
    }
}
</style>
